<template>
  <div class="edit-box" teleport="body">
    <h1>修改管理员信息</h1>
    <el-form :model="admin" label-width="120px">
      <el-form-item label="编号">
        <span>{{ admin.adminid }}</span>
      </el-form-item>
      <el-form-item label="姓名">
        <span>{{ admin.adminname }}</span>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="admin.password" />
      </el-form-item>
      <el-form-item label="角色">
        <el-radio-group v-model="admin.role">
          <el-radio :label="1">超级管理员</el-radio>
          <el-radio :label="2">普通管理员</el-radio>
        </el-radio-group>
      </el-form-item>
      <h2></h2>
      <el-tree
        ref="treeRef"
        :data="data"
        show-checkbox
        node-key="id"
        :default-expanded-keys="defaultCheckedKeys"
        :default-checked-keys="defaultCheckedKeys"
      />
      <el-form-item>
        <el-button type="primary" @click="saveFn">修改</el-button>
        <el-button type="primary" @click="cancelFn">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
    

<script setup lang="ts">
import { ElMessage, ElTree } from "element-plus";
import { reactive, watch, ref } from "vue";
import service from "../../../utils/service";
import { menudata as data } from "../../../grants/menudata";
import { TreeKey } from "element-plus/es/components/tree/src/tree.type";
// 声明属性
const props = defineProps<{
  adminname: string;
}>();

// 声明事件
const emit = defineEmits<{
  (e: "hide"): void;
  (e: "updatesuccess"): void;
}>();

interface IAdmin {
  adminname: string;
  password: string;
  role: number; //1:表示超级管理员，2：普通管理员
  adminid: string;
  checkedKeys: TreeKey[];
}

// 当前管理员的数据
const admin = reactive<IAdmin>({
  adminid: "",
  adminname: "",
  password: "",
  role: 1,
  checkedKeys: [],
});

// 取消
const cancelFn = () => {
  // 触发隐藏事件
  emit("hide");
};
//接收处理后的默认选中的权限数据放在模板属性 :default-checked-keys上
const defaultCheckedKeys = ref<string[]>();
// 获取管理员的信息：根据adminname进行获取
const getAdminDetail = () => {
  service({
    url: "/admin/detail",
    params: {
      adminname: props.adminname,
    },
  }).then((res) => {
    if (res.data.code === "200") {
      let newarr: any = [];
      admin.adminid = res.data.data[0].adminid;
      admin.adminname = res.data.data[0].adminname;
      admin.role = res.data.data[0].role;
      admin.checkedKeys = res.data.data[0].checkedKeys;
      //对权限进行处理，先拿到最低的增删查改权限-CRUD
      res.data.data[0].checkedKeys.forEach((element: any) => {
        if (
          element.includes("-C") ||
          element.includes("-R") ||
          element.includes("-U") ||
          element.includes("-D")
        ) {
          newarr.push(element);
        }
      });
      //再次循环，如果newarr中已经存在了子集权限，父节点的就不在添加，不存在则添加
      res.data.data[0].checkedKeys.forEach((element: any) => {
        if (!JSON.stringify(newarr).includes(element)) {
          newarr.push(element);
        }
      });
      defaultCheckedKeys.value = newarr;
      // console.log(defaultCheckedKeys.value);
    }
  });
};

watch(
  props,
  () => {
    getAdminDetail();
    admin.password = "";
  },
  {
    deep: true,
  }
);
let treeRef = ref<InstanceType<typeof ElTree>>();
const saveFn = () => {
  let arr: TreeKey[] = treeRef.value!.getCheckedKeys(); //获取的是选中状态的菜单项。

  let halfArr: TreeKey[] = treeRef.value!.getHalfCheckedKeys(); //获取半选中状态的菜单项。

  arr = arr.concat(halfArr);

  admin.checkedKeys = arr;
  service({
    url: "/admin/update",
    method: "post",
    data: {
      adminname: admin.adminname,
      password: admin.password,
      role: admin.role,
      checkedKeys: admin.checkedKeys,
    },
  }).then((res) => {
    if (res.data.code === "200") {
      ElMessage({
        message: "修改成功！亲",
        type: "success",
      });
      emit("hide"); //关掉自己
      location.reload();
      emit("updatesuccess");
    }
  });
};
</script>

<style scoped>
.edit-box {
  width: 400px;
  height: 420px;
  overflow: auto;
  border: 1px solid #e5e4e4;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #ededed;
  z-index: 999;
  padding-top: 20px;
  box-shadow: 1px 1px 3px #000;
  background: #eee;
}
.el-tree {
  background: #eee;
}
h1 {
  text-align: center;
}
.el-input {
  width: 200px;
}
</style>